<template>
  <!-- <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType"> -->
    <div>
  <div class="div-op">
    <div :class='{"site-navbar__header":!sidebarFold,"site-navbar__headers":sidebarFold}'>
      <div v-if="!sidebarFold" class="site-img">
      </div>
      <div v-if="sidebarFold" class="site-iamge">
      </div>
      <!-- <img src="~@/assets/websit/img/logo-is.png" alt=""> -->
      <!-- <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:;">施工企业证书管理系统</a>
        <a class="site-navbar__brand-mini" href="javascript:;">证书</a>
      </h1> -->
    </div>

    <!-- :class='{"sangeyuenei":sanButton==1,"sangeyueneiB":sanButton==2}' -->
    <!-- <div :class='{"site-navbar__body clearfix site-code-navbar":clickClass==1,"site-navbar__body clearfix site-code":clickClass==2}'> -->
      
      <!-- <div class="site-navbar__body clearfix site-code-navbar">
      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal"> -->

        <!-- <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
          <template slot="title">
            <el-badge value="new">
              <icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
            </el-badge>
          </template>
        </el-menu-item> -->
        <!-- <el-menu-item index="2">
          <el-badge value="hot">
            <a href="#" target="_blank">最新消息</a>
          </el-badge>
        </el-menu-item> -->

        <!-- <el-menu-item class="site-navbar__avatar" index="3">
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div> -->

    <!-- 弹窗, 修改密码 -->
    <update-password :contentMain="contentMain" v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  <!-- </nav> -->
  </div>
      <div :class='{"div-dian":!sidebarFold,"div-diandian":sidebarFold}'>
        <el-menu
        class="site-navbar__menu"
        mode="horizontal">
        <el-menu-item class="site-navbar__switch" index="0" @click="clickedd()">
          <!-- <icon-svg name="zhedie"></icon-svg> -->
          <i class="el-icon-arrow-left"></i>
        </el-menu-item>
      </el-menu>
    </div>
    </div>
</template>

<script>
  import UpdatePassword from './main-navbar-update-password'
  import { clearLoginInfo } from '@/utils'
  import Avatar from 'vue-avatar'
  export default {
    data () {
      return {
        updatePassowrdVisible: false,
        clickClass:1,
        contentMain:true
      }
    },
    props:{
    keyClass:{
      type:String
    }
    },
    components: {
      UpdatePassword, Avatar
    },
    computed: {
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold },
        set (val) { this.$store.commit('common/updateSidebarFold', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      userName: {
        get () { return this.$store.state.user.name }
      }
    },
    watch:{
    keyClass: {
        handler(val) {
          window.setTimeout(() => {
            this.keyClassSite()
          }, 0)
        }
      },
    },
    created(){
    // this.mainSidebar()
    // console.log(this.keyClass);
    // console.log('sdser');
    },
    methods: {
      clickedd(){
      this.sidebarFold = !this.sidebarFold
      },
      // 传来的  值
      keyClassSite(){
      if(this.keyClass == 1){
      this.clickClass = 1
      }else{
      this.clickClass = 2
      }
      },
      // 修改密码
      updatePasswordHandle () {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },
      // 退出
      // logoutHandle () {
      //   this.$confirm('确定要退出系统吗 wt?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     showClose: false,
      //     type: 'warning'
      //   }).then(() => {
      //     this.$http({
      //       url: this.$http.adornUrl('/sys/logout'),
      //       method: 'post',
      //       data: this.$http.adornData()
      //     }).then(({data}) => {
      //       if (data && data.code === 0) {
      //         clearLoginInfo()
      //         this.$router.push({ name: 'login' })
      //         // sessionStorage.removeItem('menuList')
      //       }
      //     })
      //   }).catch(() => {})
      // }
    }
  }
</script>
<style lang="scss" scoped>
.el-menu{
  background-color: transparent !important;
}
.site-navbar__header{
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 16px;
  // display: flex;
  // align-self: start;
  // justify-content: center;
}
.div-op{
  width: 200px !important;
  height: 50px !important;
  position: fixed;
  left: 0;
  top: 0;
}
.site-navbar__headers{
  padding-top: 13px;
  // padding-left: 15px;
  // padding-right: 21px;
  // padding-bottom: 29px;
  width: 64px;
  height: 80px;
  background-color:#2B3357;
  display: flex;
  align-self: start;
  justify-content: center;
}
/deep/.div-dian{
  width: 200px;
  height: 40px;
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1030;
  .site-navbar__menu{
    .el-menu-item{
      height: 40px !important;
      line-height: 40px !important;
      min-width: 200px !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
    }
    .el-menu-item.is-active{
      border-radius: 0px !important;
    }
  }
}
/deep/.div-diandian{
  width: 64px;
  height: 40px;
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1030;
  .site-navbar__menu{
    .el-menu-item{
      height: 40px !important;
      line-height: 40px !important;
      min-width: 64px !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
    }
    .el-menu-item.is-active{
      border-radius: 0px !important;
    }
  }
}
.site-img{
  width: 100%;
  height: 100%;
  background: url(../assets/img/logo.png);
  background-size: 100% 100%;
  background-color: #2B3357;
}
.site-iamge{
  width: 48px;
  height: 38px;
  background: url(../assets/img/logo-is.png);
  background-size: 100% 100%;
  background-color: #2B3357;
}
.el-menu.el-menu--horizontal{
border-bottom: 0px !important;
}
.el-menu--horizontal>.el-menu-item{
  color: #ffffff !important;
}
.el-dropdown-link{
    color: #ffffff !important;
}
.site-code-navbar{
  background:url(../assets/img/header-top.png) !important;
  // background-size: 100% 100%;
  background-color: #060E48 !important;
}
// .site-code{
//   background:none !important;
//   // background-size: 100% 100%;
//   background-color: #ffffff !important;
// }
/deep/.site-navbar__body{
.site-navbar__menu{
  .el-menu-item.is-active {
  background: #060E48 !important;
}
}
}
.site-navbar__switch:hover{
background: #171C39 !important;
display: flex;
align-items: center;
justify-content: center;
i{
  color:#FFFFFF;
  opacity: 1;
}
}
.site-navbar__switch{
display: flex;
align-items: center;
justify-content: center;
background: #171C39 !important;
}
.site-navbar__avatar:hover{
background: #060E48 !important;
}
/deep/.site-navbar__switch{
.el-menu--horizontal > .el-menu-item{
  color:#FFFFFF;
}
}

</style>
